<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>课程播放</title>
    <link rel="stylesheet" href="/index/css/lanrenzhijia.css"/>
    <link rel="stylesheet" href="/index/css/common.css?v=3">
    <link rel="stylesheet" href="/index/css/play.css?v=7">

    <style>
        .audioplayer-playpause{
            display: none;
        }
        .audioplayer-time-current{
            left:0.5rem;
        }

        .audioplayer-time-duration{
            border:none;
            right:0.5rem;
        }
        .audioplayer-volume{
            display: none;
        }
        .audioplayer-bar {
            left:3rem;
            right:3rem;
        }
        /*.audio_theme{*/
        /*display: table-cell;*/
        /*vertical-align: middle;*/
        /*}*/
        .tuiguang {
            position: fixed;
            bottom: 0;
            width: 100%;
            border-top: 1px solid #ccc;
            padding: 10px;
        }

        .tgBox {
            float: right;
        }

        .play-btns {
            width: 100%;

            text-align: center;
            margin-top: 10%;
            /*display:table-cell;*/
        }

        .play-btns img {
            vertical-align: middle;
            margin: 0 10%;
            width:35px;
        }

        .play-btns a{
            display: inline-block;
        }

        #play{
            width:80px;
        }

    </style>
</head>
<body>
<div class="tabsBox">
    <div class="topTab">
        <a class="tabLeft" href="{:url('lesson/details',['id'=>$info['lesson_id']])}">
            <img src="/index/assets/left_J.png">
        </a>
        <div class="tabCenters">课程详情</div>
        <!-- <div class="tabRight">收益说明</div> -->
    </div>
</div>
<div class="audio_top">
    <div class="audio_theme">
        <img src="{$oss_path}{$info.image}">

        <p>{$info.section_name}</p>
    </div>
</div>
<div id="wrapper">
    <audio preload="auto" controls width="100%">
        <source src="{$oss_path}{$info.url}"/>
        <!--<source src="/index/public/audio.ogg" />-->
        <!--<source src="/index/public/audio.wav" />-->
    </audio>
</div>

<div class="play-btns">
    <!--<img src="/index/assets/icon/back.png" alt="">-->

    <a href="{if empty($section[$info['rank']-1])}javascript:;{else/}{:url('play',['section_id'=>$section[$info['rank']-1]['id']])}{/if}">
        <img src="/index/assets/icon/prev.png" alt="">
    </a>
    <img src="/index/assets/icon/play.png" alt="" id="play">
    <a href="{if empty($section[$info['rank']+1])}javascript:;{else/}{:url('play',['section_id'=>$section[$info['rank']+1]['id']])}{/if}">
     <img src="/index/assets/icon/next.png" alt="">
    </a>
    <!--<img src="/index/assets/icon/speed.png" alt="">-->
</div>
<div class="tuiguang">
    <div class="content">{$info.intro}</div>
    <div class="tgBox">
        <img src="/index/assets/money.png">
        <a href="{:url('mine/invite')}" class="zhuanqian">推广赚钱</a>
    </div>
</div>

</body>
<script src="/index/js/main.js"></script>
<script src="/index/js/audioplayer.js"></script>
<script src="/index/js/common.js" type="text/javascript"></script>
<script>
    $(function () {

        $("#play").click(function () {
            $(".audioplayer-playpause").click();

            var status = $('.audioplayer-playpause').attr('title');

//	        console.log(status);
            if (status == 'Play') {
                stop();

            } else {
                play();
            }
        })
        $('audio').audioPlayer();


        function play() {
            $('#play').attr('src', '/index/assets/icon/stop.png');
        }

        function stop() {
            $('#play').attr('src', '/index/assets/icon/play.png');

        }


        setInterval(function(){
            if($('.audioplayer-time-current').text()==$(".audioplayer-time-duration").text()){
                stop();
            }
        },100)


        //记录学习人数
        var inter = setInterval(function(){

            if($('.audioplayer-time-current').text() !='00:00'){
                $.post('{:url("recordPlay")}',{lesson_id:'{$info.lesson_id}'},function(res){
                    clearInterval(inter);
                })
            }

        },1000)
    });

//    $('.tabLeft img').click(function () {
//        window.history.go(-1);
//    })

</script>
</html>